import React from 'react';
import List from '@txdfe/at-list';
import PropTypes from 'prop-types';
import { Button } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import { navigate, Link } from 'utils/router';
import isEqual from 'lodash.isequal';
import './index.scss';
import intl from '../../locale';

export default class GroupList extends React.PureComponent {
  static propTypes = {
    getDataSource: PropTypes.func,
    groupList: PropTypes.array,
    subGroupMap: PropTypes.object,
  };

  static defaultProps = {
    getDataSource: () => {},
    groupList: [],
    subGroupMap: {},
  };

  componentDidMount() {
    this.setStyle();
  }

  componentDidUpdate(prevProps) {
    if (!isEqual(prevProps.subGroupMap, this.props.subGroupMap)) {
      this.setStyle();
    }
  }

  // 小于480，隐藏middle；小于360，隐藏描述,小于250，隐藏right;
  setStyle = () => {
    const subGroupListItems = document.querySelectorAll('.group-list-item');
    subGroupListItems.forEach((item) => {
      if (item.offsetWidth < 250) {
        item.querySelector('.at-list-item-middle').style.display = 'none';
        item.querySelector('.project-list-item-desc').style.display = 'none';
        item.querySelector('.at-list-item-right').style.display = 'none';
      } else if (item.offsetWidth < 360) {
        item.querySelector('.project-list-item-desc').style.display = 'none';
        item.querySelector('.at-list-item-middle').style.display = 'none';
      } else if (item.offsetWidth < 500) {
        item.querySelector('.at-list-item-middle').style.display = 'none';
      }
    });
  };

  goSubGroup = (e, path) => {
    e.stopPropagation();
    e.preventDefault();
    navigate(`/${path}`, { state: { forceUpdate: true } });
  };

  loopRenderItem = (list, isRoot, total, path) => {
    const { getDataSource, subGroupMap } = this.props;
    if (!(list && list.length)) {
      return null;
    }
    return (
      <div
        className={
          isRoot ? 'group-list-item-container' : 'group-list-item-container sub-group-container'
        }
      >
        {getDataSource(list).map((item, index) => {
          const curId = list[index].id;
          const subGroupList = (curId && subGroupMap[curId] && subGroupMap[curId].list) || [];
          const subTotal = (curId && subGroupMap[curId] && subGroupMap[curId].total) || 0;
          const subPath = list[index].path_with_namespace;
          const isExpanded = curId && subGroupMap[curId] && subGroupMap[curId].isExpanded;
          // const pathWithId = list[index].path_with_namespace;
          return (
            <div className="group-list-item" key={list[index].id}>
              <Link to={`/${subPath}`}>
                <List.Item dataSource={item} hasHoverItems />
              </Link>
              {isExpanded && this.loopRenderItem(subGroupList, false, subTotal, subPath)}
            </div>
          );
        })}

        {!isRoot && total > 20 ? (
          <div className="go-sub-group">
            <Button
              type="primary"
              text
              onClick={(e) => {
                this.goSubGroup(e, path);
              }}
              style={{ marginLeft: 32 }}
            >
              <YunxiaoIcon type="more-line" />
              {intl.get({
                id: 'code-assets.components.groupList.ViewMore',
                defaultMessage: '查看更多',
              })}
            </Button>
          </div>
        ) : null}
      </div>
    );
  };

  render() {
    const { groupList } = this.props;
    return (
      <List
        // dataSource={dataSource}
        pagination={{
          onLoadMore: () => {},
          hasMore: false,
          useWindow: false,
          getScrollParent: () => {
            return document.querySelector('#container');
          },
        }}
        hasHoverItems
      >
        {this.loopRenderItem(groupList, true)}
      </List>
    );
  }
}
